Hang on, loading...
1const button = tv(
2 {
3 base: 'font-semibold text-white py-1 px-3 rounded-full active:opacity-80',
4 variants: {
5 color: {
6 primary: 'bg-blue-500 hover:bg-blue-700',
7 secondary: 'bg-purple-500 hover:bg-purple-700',
8 },
9 },
10 },
11 {
12 responsiveVariants: ['xs', 'sm', 'md'],
13 }
14);
15
1const card = tv({
2 slots: {
3 base: 'flex flex-col',
4 header: 'bg-gray-100 p-4',
5 body: 'p-4',
6 footer: 'bg-gray-100 p-4',
7 },
8});
9
1const pagination = tv({
2 slots: {
3 base: 'flex gap-1',
4 item: 'p-2',
5 prev: 'p-2',
6 next: 'p-2',
7 },
8 compoundSlots: [
9 {
10 slots: ['item', 'prev', 'next'],
11 class: 'bg-gray-200 hover:bg-gray-300',
12 },
13 ],
14});
15
1import { cva } from 'class-variance-authority';const button = cva('font-semibold rounded', {
2 variants: {
3 color: {
4 primary: 'bg-blue-500 text-white',
5 secondary: 'bg-purple-500 text-white',
6 },
7 size: {
8 sm: 'text-sm px-2',
9 md: 'text-md px-4',
10 lg: 'text-lg px-6',
11 },
12 },
13 defaultVariants: {
14 color: 'primary',
15 size: 'md',
16 },
17});
18